<!--
  * 娃娃表单抽屉
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-08-21 19:52:43
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
  <a-modal
    :title="dollId ? '编辑娃娃' : '新增娃娃'"
    :width="500"
    v-model:open="visible"
    @cancel="onClose"
    @ok="onSubmit"
    :confirmLoading="submitLoading"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-form-item label="照片" name="imgUrl">
        <Upload
            :defaultFileList="defaultFileList"
            :maxUploadSize="1"
            :folder="1"
            buttonText="上传图片"
            extraMsg="上传图片"
            @change="changeAttachment"
        />

      </a-form-item>

      <a-form-item label="产品类型" name="type">
        <a-input v-model:value="form.type" placeholder="请输入产品类型" />
      </a-form-item>

      <a-form-item label="官名" name="officialName">
        <a-input v-model:value="form.officialName" placeholder="请输入官名" />
      </a-form-item>

      <a-form-item label="肤色" name="skin">
        <a-input v-model:value="form.skin" placeholder="请输入肤色" />
      </a-form-item>

      <a-form-item label="尺寸" name="size">
        <a-input v-model:value="form.size" placeholder="请输入尺寸" />
      </a-form-item>
    </a-form>

  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { dollApi } from '/@/api/business/bjd/doll-api';
import Upload from '/@/components/support/file-upload/index.vue';

import { smartSentry } from '/@/lib/smart-sentry';

const visible = ref(false);
const dollId = ref(null);
const submitLoading = ref(false);
const formRef = ref();
const fileList = ref([]);

const form = reactive({
  type: '',
  officialName: '',
  skin: undefined,
  size: '',
  imgUrl: ''
});

const rules = {
  type: [{ required: true, message: '请输入娃娃类型' }],
  officialName: [{ required: true, message: '请输入官方名称' }],
  skin: [{ required: true, message: '请输入肤色' }],
  size: [{ required: true, message: '请输入尺寸' }]
};

// 显示弹窗
const showModal = async (id) => {
  visible.value = true;
  dollId.value = id;
  if (id) {
    await queryDollDetail(id);
  }
};


// 查询娃娃详情
async function queryDollDetail(id) {
  try {
    const result = await dollApi.detail(id);
    Object.assign(form, result.data);
    console.log('form',form)
    if (form.imgUrl) {
      // 回显示图片
      console.log('form.imgUrl',form.imgUrl)
      defaultFileList.value = [
        {
              fileName: 'photo.png',
              fileUrl: form.imgUrl
        }
      ];


    }
  } catch (err) {
    smartSentry.captureError(err);
  }
}
const defaultFileList = ref([]);

function changeAttachment(fileList) {
  defaultFileList.value = fileList;
  form.imgUrl = fileList[0].url;
}


// 提交表单
const onSubmit = () => {
  formRef.value.validate().then(async () => {
    try {
      submitLoading.value = true;
      if (dollId.value) {
        await dollApi.update({ ...form, dollId: dollId.value });
      } else {
        await dollApi.add(form);
      }
      message.success(dollId.value ? '编辑成功' : '添加成功');
      emit('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      submitLoading.value = false;
    }
  });
};

// 关闭弹窗
const onClose = () => {
  visible.value = false;
  dollId.value = null;
  formRef.value?.resetFields();
  fileList.value = [];
  Object.assign(form, {
    dollTypeId: undefined,
    officialName: '',
    skinColor: undefined,
    size: '',
    photo: '',
    imageUrl: ''
  });
};

const emit = defineEmits(['reloadList']);
defineExpose({ showModal });
</script>

<style lang="less" scoped>
.drawer-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>